<style type="text/css">
input[type="text"], textarea{
    padding: 5px;
    margin: 3px;
}
textarea{
    resize: none;
}
#btn_info_adicional{
    margin: 20px;
}
.btn_continuar{
    padding: 10px 25px;
    float: right;
    margin-right: 20px;
}
.parrafo_ayuda{
    text-align: justify;
    margin: 10px;
    border: 1px solid black;
    background-color: #F9EDBE;
    border: 1px solid #F0C36D;
    padding: 20px;
    display: none;
}
.contenedorImagen{
    max-height: 144px;
    overflow: scroll;
    overflow-x: hidden;
}
#skel-layers-wrapper{
    background-color: #ABA07E;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
    $("input, textarea").focus(function(){
        $(".parrafo_ayuda").hide();
        var id = $(this).attr("id");
        if(id=="nombreSitioWeb"){
            $("#pNombreSitioWeb").fadeIn();
        }else if(id=="nombreDominio"){
            $("#pNombreDominio").fadeIn();
        }else if(id=="contenido"){
            $("#pContenido").fadeIn();
        }else if(id=="telefonos"){
            $("#pTelefonos").fadeIn();
        }else if(id=="direccion"){
            $("#pDireccion").fadeIn();
        }else if(id=="correoElectronico"){
            $("#pCorreoElectronico").fadeIn();
        }
    });
    $("input, textarea").blur(function(){
        if($("#nombreDominio").val()!=""){
            $("label.error").hide();
            $("input.error").removeClass('error');
            $("#nombreDominio").val().focus();
        }
        if($("#nombreDominio").val()!=""){
            $(".btn_continuar").removeAttr('disabled');
            $(".btn_continuar").removeClass('disabled');
            $(".btn_continuar").addClass('enabled');
        }
    });
    $(".btn_continuar").click(function(){        
        if($("#nombreDominio").val()==""){
            $("#nombreDominio").focus();
            $("#errNombreDominio").show();
            $("#nombreDominio").addClass('error');
        }
    });
    
    
    
    
    
    $(".thumbPlantilla").click(function(){
        var dataIdImagen = $(this).attr("data-id-imagen");
        switch(dataIdImagen){
            case "1":
                $("#inputFile1").trigger("click");
                break;
            case "2":
                $("#inputFile2").trigger("click");
                break;
            case "3":
                $("#inputFile3").trigger("click");
                break;
        }
    });
    $("input[type=file]").change(function(){
        var imgId = $(this).attr("data-id-img");
        readURL(this, imgId);
    });
});
function readURL(inputFile, imgId) {

    if (inputFile.files && inputFile.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#'+imgId).attr('src', e.target.result);
        }

        reader.readAsDataURL(inputFile.files[0]);
    }
}
</script>
<!-- Main -->
<div style="position: relative;">
    <div style="position: absolute; top: 0; left: 35%; width: 30%;">
        <p class="parrafo_ayuda" id="pNombreSitioWeb">
            El <b>nombre de tu sitio web</b> definirá sus contenidos.<br />
            Por ejemplo: <b>Juan Perez Portafolio</b><br />
        </p>
        <p class="parrafo_ayuda" id="pNombreDominio">
            El <b>nombre de dominio</b> es muy importante, es el nombre con el que será conocido tu sitio web en Internet, es esencial elegir un buen nombre.
            <br />
            Por ejemplo: <b>www.mypersonalsite.com, www.jperez.com</b>
        </p>
        <p class="parrafo_ayuda" id="pContenido">
            Describe el <b>contenido</b> que tendrá tu sitio web. Puedes ponerle frases, textos, citas, etc... Todo lo que quieras :)
        </p>
        <p class="parrafo_ayuda" id="pBreveDescripcion">
            Una <b>breve descripción</b> de tu sitio web.
        </p>
        <p class="parrafo_ayuda" id="pTelefonos">
            Los <b>teléfonos</b> a los que puedan comunicarse contigo.
        </p>
        <p class="parrafo_ayuda" id="pCorreoElectronico">
            Ingresa un <b>correo electrónico</b> donde puedan escribirte.
        </p>
        <p class="parrafo_ayuda" id="pDireccion">
            Ingresa una <b>dirección</b>.
        </p>
    </div>
</div>
<section id="main" class="container">
    <!--
    <header>
        <h2>Asistente de creación de sitio web</h2>
        <p>Estás a sólo 2 pasos de tener tu idea en Internet</p>
    </header>
    -->
    <div class="row">
        <div class="12u">
            <!-- Form -->
            <section class="box">
                <h3>Paso 3 de 4</h3>
                <p>Describe la información que estará en tu sitio web.</p>
                <form action="<?php echo url_for('@construccionPasoTresGrabar'); ?>" method="post" autocomplete="off">
                    <div class="row uniform half ollapse-at-2">
                        <div class="6u">
                            <input type="text" id="nombreSitioWeb" name="nombreSitioWeb" size="50" placeholder="Nombre de tu sitio web" />
                        </div>
                        <div class="6u">
                            <input type="text" id="nombreDominio" name="nombreDominio" size="50" placeholder="Nombre de dominio (Ejemplo: www.juanperez.com)" />
                        </div>
                    </div>
                    <div class="row uniform half">
                        <div class="12u">
                            <textarea id="contenido" name="contenido" placeholder="Breve descripción de contenidos" rows="6"></textarea>
                        </div>
                    </div>
                    <div class="row uniform half">
                        <div class="12u">
                            Imágenes
                        </div>
                    </div>
                    <div class="row uniform half">
                        <div class="4u 12u(mobilep)">
                            <span class="image fit contenedorImagen">
                                <a href="javascript:void(0);" class="thumbPlantilla" data-id-imagen="1">
                                    <img src="<?php echo $sf_request->getRelativeUrlRoot()."/images/pic04.jpg"; ?>" id="imagen-1" alt="">
                                </a>
                                <div style="width: 0px; height: 0px; overflow: hidden;">
                                    <input type="file" id="inputFile1" data-id-img="imagen-1" />
                                </div>
                            </span>
                        </div>
                        <div class="4u 12u(mobilep)">
                            <span class="image fit contenedorImagen">
                                <a href="javascript:void(0);" class="thumbPlantilla" data-id-imagen="2">
                                    <img src="<?php echo $sf_request->getRelativeUrlRoot()."/images/pic04.jpg"; ?>" id="imagen-2" alt="">
                                </a>
                                <div style="width: 0px; height: 0px; overflow: hidden;">
                                    <input type="file" id="inputFile2" data-id-img="imagen-2" />
                                </div>
                            </span>
                        </div>
                        <div class="4u 12u(mobilep)">
                            <span class="image fit contenedorImagen">
                                <a href="javascript:void(0);" class="thumbPlantilla" data-id-imagen="3">
                                    <img src="<?php echo $sf_request->getRelativeUrlRoot()."/images/pic04.jpg"; ?>" id="imagen-3" alt="">
                                </a>
                                <div style="width: 0px; height: 0px; overflow: hidden;">
                                    <input type="file" id="inputFile3" data-id-img="imagen-3" />
                                </div>
                            </span>
                        </div>
                    </div>
                    <div class="row uniform half">
                        <div class="12u">
                            Datos de contacto
                        </div>
                    </div>
                    <div class="row uniform half ollapse-at-2">
                        <div class="6u">
                            <input type="text" id="telefonos" name="telefonos" size="50" placeholder="Teléfonos" />
                        </div>
                        <div class="6u">
                            <input type="text" id="correoElectronico" name="correoElectronico" size="50" placeholder="Correo electrónico" />
                        </div>
                    </div>
                    <div class="row uniform half ollapse-at-2">
                        <div class="12u">
                            <input type="text" id="direccion" name="direccion" size="50" placeholder="Dirección" />
                        </div>
                    </div>
                    <div class="row uniform half">
                        <div class="12u">
                            Medios Sociales
                        </div>
                    </div>
                    <div class="row uniform half ollapse-at-2">
                        <div class="6u">
                            <input type="text" id="perfilFacebook" name="perfilFacebook" size="50" placeholder="Perfil en Facebook" />
                        </div>
                        <div class="6u">
                            <input type="text" id="perfilTwitter" name="perfilTwitter" size="50" placeholder="Perfil en Twitter" />
                        </div>
                    </div>
                    <div class="row uniform half ollapse-at-2">
                        <div class="6u">
                            <input type="text" id="perfilGooglePlus" name="perfilGooglePlus" size="50" placeholder="Perfil en Google+" />
                        </div>
                        <div class="6u">
                            <input type="text" id="canalYoutube" name="canalYoutube" size="50" placeholder="Canal de Youtube" />
                        </div>
                    </div>
                    <div class="row uniform half">
                        <div class="12u">
                            * Los datos ingresados son preliminares, posteriormente los podrás modificar las veces que quieras.
                        </div>
                    </div>
                    <div class="row uniform half ollapse-at-2">
                        <div class="4u"></div>
                        <div class="4u">
                            <input type="submit" value="Continuar" class="button special fit">
                        </div>
                        <div class="4u"></div>
                    </div>
                </form>
            </section>
        </div>
    </div>
</section>